<template>
  <view class="job-entry-template">
    <view class="table-row">
      <view class="table-title">公司名称</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.companyName"
          :readonly="props.readonly"
          placeholder="请输入公司名称"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">职位名称</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.positionName"
          :readonly="props.readonly"
          placeholder="请输入职位名称"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">工资薪金</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.wages"
          :readonly="props.readonly"
          placeholder="请输入工资薪金"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">开始日期</view>
      <view class="table-cell">
        <wd-datetime-picker
          type="date"
          :readonly="props.readonly"
          v-model="data.startTime"
          :displayFormat="displayFormat"
          @update:model-value="
            (newTime) => $emit('update-date', { index: props.index, type: 'startTime', newTime })
          "
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">结束日期</view>
      <view class="table-cell">
        <wd-datetime-picker
          type="date"
          :readonly="props.readonly"
          v-model="data.endTime"
          :displayFormat="displayFormat"
          @update:model-value="
            (newTime) => $emit('update-date', { index: props.index, type: 'endTime', newTime })
          "
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">离职理由</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.reasonForLeaving"
          :readonly="props.readonly"
          placeholder="请输入离职理由"
        />
      </view>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'

const props = defineProps<{
  data: {
    companyName: string
    positionName: string
    wages: string
    startTime: number
    endTime: number
    reasonForLeaving: string
  }
  readonly: boolean
  index: number // 添加索引属性
}>()

// 将日期字符串转换为时间戳
function convertDateToTimestamp(dateString: string | number): number {
  let date: Date
  if (typeof dateString === 'number') {
    date = new Date(dateString) // 如果是数字类型，直接创建 Date 对象
  } else {
    date = new Date(dateString) // 如果是字符串类型，创建 Date 对象
  }
  return date.getTime()
}

// 设置 startTime 和 endTime 的初始值
const defaultDate = new Date().toISOString().split('T')[0] // 获取当前日期的年月日
const defaultTimestamp = new Date(defaultDate).getTime() // 将默认日期转换为时间戳

const startTime = ref<number>(
  props.data.startTime ? convertDateToTimestamp(props.data.startTime) : defaultTimestamp,
)

const endTime = ref<number>(
  props.data.endTime ? convertDateToTimestamp(props.data.endTime) : defaultTimestamp,
)

// 修改内部日期格式显示
const displayFormat = (items) => {
  return `${items[0].label}年${items[1].label}月${items[2].label}日`
}

const emit = defineEmits(['update-date'])
// 处理时间更新事件
const handleUpdateTime = (type: 'startTime' | 'endTime', newTime: number) => {
  emit('update-date', { index: props.index, type, newTime })
}

// 监听 startTime 和 endTime 的变化
watch(startTime, (newTime) => {
  handleUpdateTime('startTime', newTime)
})

watch(endTime, (newTime) => {
  handleUpdateTime('endTime', newTime)
})
</script>

<style scoped>
.job-entry-template {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.table-row {
  display: flex;
  align-items: center;
  height: 40px;
}

.table-title {
  width: 65px;
  padding-right: 10px;
  font-weight: 900;
  color: black;
  text-align: right;
}

.table-cell {
  margin-left: 25px;
}
</style>
